document.addEventListener('DOMContentLoaded', function() {
    // 获取用户手机号并生成二维码
    fetchUserPhoneAndGenerateCode();
    // 更新时间
    updateDateTime();
});

// API地址
const API_URL = {
    getUserInfo: '/api/user/info',  // 获取用户信息API
    healthCode: '/api/health/code'  // 获取健康码信息API
};

// 从后端获取用户手机号并生成二维码
async function fetchUserPhoneAndGenerateCode() {
    // 显示加载状态
    showLoading();
    
    try {
        // 请求获取用户信息
        const userInfo = await fetchUserInfo();
        
        // 更新用户信息显示
        updateUserInfo(userInfo);
        
        // 请求获取健康码信息
        const healthCodeInfo = await fetchHealthCodeInfo(userInfo.phone);
        
        // 更新健康状态
        updateHealthStatus(healthCodeInfo.status);
        
        // 生成二维码
        generateQRCode(userInfo.phone, healthCodeInfo.code_id);
    } catch (error) {
        console.error('获取用户信息失败:', error);
        // 获取数据失败时使用本地模拟数据
        fallbackToLocalData();
    } finally {
        // 隐藏加载状态
        hideLoading();
    }
}

// 获取用户信息
async function fetchUserInfo() {
    try {
        const response = await fetch(API_URL.getUserInfo, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            credentials: 'include' // 包含cookies等凭证
        });

        if (!response.ok) {
            if (response.status === 401 || response.status === 403) {
                window.location.href = '../login.html'; // 未登录时重定向
                throw new Error('未登录或无权限');
            }
            throw new Error('服务器响应异常: ' + response.status);
        }

        const result = await response.json();
        
        // 处理后端返回的标准格式R<T>响应
        if (result.code === 1 && result.data) {
            return result.data;
        } else {
            throw new Error(result.msg || '获取用户信息失败');
        }
    } catch (error) {
        console.error('获取用户信息API请求失败:', error);
        throw error;
    }
}

// 获取健康码信息
async function fetchHealthCodeInfo(phone) {
    try {
        const response = await fetch(`${API_URL.healthCode}?phone=${encodeURIComponent(phone)}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            credentials: 'include' // 包含cookies等凭证
        });

        if (!response.ok) {
            throw new Error('服务器响应异常: ' + response.status);
        }

        const result = await response.json();
        
        // 处理后端返回的标准格式R<T>响应
        if (result.code === 1 && result.data) {
            return result.data;
        } else {
            throw new Error(result.msg || '获取健康码信息失败');
        }
    } catch (error) {
        console.error('获取健康码信息API请求失败:', error);
        throw error;
    }
}

// 更新用户信息显示
function updateUserInfo(userInfo) {
    // 更新用户名称
    document.querySelector('.info h2').textContent = userInfo.name || '未知用户';
    
    // 更新手机号（隐藏中间部分）
    const maskedPhone = maskPhoneNumber(userInfo.phone);
    document.querySelector('.phone').textContent = maskedPhone;
    
    // 如果有头像，则替换默认图标
    if (userInfo.avatar_url) {
        const avatarDiv = document.querySelector('.avatar');
        avatarDiv.innerHTML = `<img src="${userInfo.avatar_url}" alt="用户头像">`;
    }
}

// 手机号中间四位加密
function maskPhoneNumber(phone) {
    if (!phone || phone.length !== 11) {
        return '未知号码';
    }
    return phone.substring(0, 3) + '****' + phone.substring(7);
}

// 更新健康状态显示
function updateHealthStatus(status) {
    const statusElement = document.querySelector('.status-text');
    statusElement.textContent = '健康状态：' + status;
    
    // 根据不同状态设置不同颜色
    switch(status) {
        case '正常':
            statusElement.style.color = '#52c41a'; // 绿色
            break;
        case '异常':
            statusElement.style.color = '#f5222d'; // 红色
            break;
        case '待确认':
            statusElement.style.color = '#faad14'; // 黄色
            break;
        default:
            statusElement.style.color = '#1890ff'; // 蓝色
    }
}

// 生成二维码
function generateQRCode(phoneNumber, codeId) {
    // 生成二维码内容（包含手机号、健康码ID和时间戳）
    const timestamp = new Date().getTime();
    const qrContent = `HEALTH_CODE_${phoneNumber}_${codeId}_${timestamp}`;
    
    // 使用 qrcode-generator 库生成二维码
    const qr = qrcode(0, 'L');
    qr.addData(qrContent);
    qr.make();
    
    // 获取二维码的 HTML 并设置大小
    const qrImage = qr.createImgTag(6);
    
    // 将二维码添加到页面
    document.getElementById('qrCode').innerHTML = qrImage;
}

// 在API请求失败时回退使用本地数据
function fallbackToLocalData() {
    // 设置默认用户信息
    const defaultUser = {
        name: '张三',
        phone: '13888888888'
    };
    
    // 更新用户信息显示
    updateUserInfo(defaultUser);
    
    // 设置默认健康状态
    updateHealthStatus('正常');
    
    // 使用默认手机号生成二维码
    generateQRCode(defaultUser.phone, 'LOCAL_' + new Date().getTime());
    
    // 显示离线提示
    showOfflineNotice();
}

// 显示离线提示
function showOfflineNotice() {
    const noticeList = document.querySelector('.notice-list');
    const offlineNotice = document.createElement('div');
    offlineNotice.className = 'notice-item offline-notice';
    offlineNotice.innerHTML = `
        <i class="fas fa-exclamation-triangle" style="color:#faad14"></i>
        <span>当前处于离线模式，显示的是本地数据</span>
    `;
    
    // 添加到通知列表顶部
    noticeList.insertBefore(offlineNotice, noticeList.firstChild);
}

// 显示加载状态
function showLoading() {
    const qrCodeElement = document.getElementById('qrCode');
    qrCodeElement.innerHTML = `
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载中...</span>
        </div>
    `;
}

// 隐藏加载状态
function hideLoading() {
    // 加载完毕后由生成二维码函数替换内容，无需额外处理
}

// 更新时间显示
function updateDateTime() {
    const now = new Date();
    const dateTimeStr = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    });
    document.getElementById('updateTime').textContent = dateTimeStr;
}

// 刷新二维码
function refreshCode() {
    // 添加旋转动画效果
    const refreshBtn = document.querySelector('.refresh-btn i');
    refreshBtn.style.transition = 'transform 0.5s';
    refreshBtn.style.transform = 'rotate(360deg)';
    
    // 重新获取数据并生成二维码
    fetchUserPhoneAndGenerateCode();
    updateDateTime();
    
    // 动画结束后重置
    setTimeout(() => {
        refreshBtn.style.transition = 'none';
        refreshBtn.style.transform = 'rotate(0deg)';
    }, 500);
}

// 页面加载时的渐入效果
document.body.style.opacity = 0;
setTimeout(() => {
    document.body.style.transition = 'opacity 0.3s ease-in';
    document.body.style.opacity = 1;
}, 0); 